<template>
	<view>
		<navigator class="dynamic" :url="`dynamicPage/DynamicDetail?id=${item.newsId}`" v-for="(item,index) in dynamicInfo" :key="index">
			<view class="dynamic-img">
				<image :src="item.image" mode=""></image>
			</view>
			<view class="dynamic-con">
				<view class="dynamic-title">
					{{item.title}}
				</view>
				<view class="dynamic-down">
					<view class="dynamic-time">
						{{item.date | getTime}}
					</view>
					<view class="dynamic-look">
						阅读 {{item.views}}
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {formatDate} from '@/common/utils.js'
	import {getDynamicInfo} from "@/common/request.js"
	
	export default {
		data() {
			return {
				dynamicInfo:[],   // 动态信息
			};
		},
		methods:{
			getDynamicMsg(){
				getDynamicInfo().then(res=>{
					this.dynamicInfo=res
				})
			}
		},
		filters:{
			getTime(time){
				let date = new Date(time)
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		},
		created() {
			this.getDynamicMsg()
		}
	}
</script>

<style lang="scss">
	.dynamic{
		display: flex;
		border-bottom: #ddd 3rpx solid;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		.dynamic-img{
			width: 400rpx;
			image{
				border-radius: 15rpx;
				margin: 10rpx 20rpx;
				width: 250rpx;
				height: 180rpx;
			}
		}
		.dynamic-con{
			padding: 10rpx;
			.dynamic-title{
				font-size: 34rpx;
				@include ellipsis-two
			}
			.dynamic-down{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				.dynamic-time{
					
				}
				.dynamic-look{
					position: flex;
					justify-content: flex-end;
				}
			}
		}
	}
</style>
